<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack" />
        <view>赞和收藏</view>
        <image class="img-hide" src="../../static/brands-search.svg" />
      </view>
    </view> -->

    <navigationBar title="赞和收藏" backBarBorder="2rpx solid #F1F1F1"/>

    <view class="content">
      <template v-for="item in dataList.likeCollectionList" :key="item.id">
        <!-- 赞了评论 -->
        <view class="item-comment">
          <image :src="item.avatarUrl" />
          <view class="item-con">
            <view>
              <text>{{ item.nickName }}</text>
              <view>
                {{
                  item.types === 2
                    ? "收藏了你的帖子 "
                    : item.type === 1
                    ? "赞了你的帖子"
                    : "赞了你的评论"
                }}
                <text>{{ functions.timeText(item.createdTime) }}</text>
              </view>
            </view>
            <image :src="item.banner[0]" />
          </view>
        </view>
        <!-- 收藏了帖子 -->
        <!-- <view class="item-comment item-posting" v-else>
          <image :src="item.avatarUrl"/>
          <view class="item-con">
            <text>{{item.nickName}}</text>
            <view>收藏了你的帖子 <text>{{functions.timeText(item.createdTime)}}</text> </view>
          </view>
        </view> -->
      </template>
    </view>
    <!-- 已经到底了 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>

    <view class="safe-padding"></view>
  </view>
</template>

<script setup>
  import { ref, reactive, computed, onMounted } from "vue";
  import { onReachBottom } from "@dcloudio/uni-app";
  import { likeCollectionList } from "@/api/user.js";
  import functions from "@/utils/functions.js";

  //是否加载结束
  const isEnd = ref(false);

  //分页数据
  const pageData = reactive({
    pageSize: 10,
    page: 1,
  });

  const dataList = reactive({
    likeCollectionList: [],
  });

  onMounted(() => {
    getLikeCollectionList();
  });

  onReachBottom(() => {
    if (isEnd.value) return;
    pageData.page++;
    getLikeCollectionList();
  });

  const goBack = () => {
    uni.navigateBack({ delta: 1 });
  };

  //获取评论和@列表
  const getLikeCollectionList = async () => {
    let res = await likeCollectionList({ ...pageData });
    if (res.list.length < pageData.pageSize) isEnd.value = true;
    console.log("点赞和收藏", res);
    dataList.likeCollectionList = dataList.likeCollectionList.concat(res.list);
  };
  
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  .fixed-con {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .go-back {
      width: 750rpx;
      height: 90rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background-color: white;
      border-bottom: 2rpx solid #f1f1f1;
      @include flex(row, space-between, center);
      image {
        width: 40rpx;
        height: 40rpx;
      }
      view {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
      .img-hide {
        opacity: 0;
      }
    }
  }

  .content {
    padding-top: calc(var(--status-bar-height) + 90rpx);
    height: auto;
    .item-comment {
      width: 750rpx;
      /* height: 176rpx; */
      background: white;
      padding: 32rpx 0 0 30rpx;
      box-sizing: border-box;
      @include flex(row, flex-start, flex-start);

      > image:nth-of-type(1) {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-right: 32rpx;
      }

      .item-con {
        flex: 1;
        height: 100%;
        border-bottom: 2rpx solid #f1f1f1;
        padding-bottom: 32rpx;
        @include flex(row, space-between, flex-start);

        > view {
          @include flex(column, flex-start, flex-start);

          > text:nth-of-type(1) {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 30rpx;
            color: #222222;
          }
          > view {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #848484;
            margin: 8rpx 0;
            text {
              margin-left: 8rpx;
            }
          }
          > text:nth-of-type(2) {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #848484;
          }
        }

        > image {
          width: 80rpx;
          height: 80rpx;
          margin-right: 30rpx;
          border-radius: 5rpx;
        }
      }
    }

    .item-posting {
      height: 144rpx;

      .item-con {
        padding-bottom: 0;
      }
    }
  }

  .is-end {
    text-align: center;
    margin: 20rpx;
    color: #8a8a8a;
  }
}
</style>